<template>
  <div id="header">
    <div class="headBj">
      <img src="../assets/image/headMain.png" alt="" />
    </div>
    <div class="title" @click="go">智慧气体安全监控中心</div>
    <div class="mainBox">
      <div class="ctn">
        <div v-for="item in AsideList" :key="item.id" @click="rtClick(item.id)">
          <router-link :to="item.path">
            <div class="routerBox" :class="activeRout == item.id ? 'color1' : 'color2'">
              {{ item.name }}
            </div>
          </router-link>
        </div>
      </div>
      <img src="../assets/image/head-R.png" alt="" />
    </div>
    <div class="TimeBox">
      <div class="location">
        {{ autolocation ? autolocation : '无法获取定位' }}
      </div>
      <div class="temp" v-if="autolocation && temperature">
        <div class="img-box">
          <img v-if="picIdx == 0 || picIdx == 2 || picIdx == 38" src="../assets/image/1.png" alt="" />
          <img v-else-if="picIdx == 1 || picIdx == 3" src="../assets/image/1.1.png" alt="" />
          <img v-else-if="picIdx == 4" src="../assets/image/2.png" alt="" />
          <img v-else-if="picIdx == 5 || picIdx == 7" src="../assets/image/3.png" alt="" />
          <img v-else-if="picIdx == 6 || picIdx == 8" src="../assets/image/4.png" alt="" />
          <img v-else-if="picIdx == 9" src="../assets/image/5.png" alt="" />
          <img v-else-if="picIdx == 10 || picIdx == 11 || picIdx == 12" src="../assets/image/6.png" alt="" />
          <img v-else-if="picIdx <= 20 && picIdx >= 13" src="../assets/image/7.png" alt="" />
          <img v-else-if="picIdx <= 25 && picIdx >= 21" src="../assets/image/8.png" alt="" />
          <img v-else-if="picIdx <= 29 && picIdx >= 26" src="../assets/image/9.png" alt="" />
          <img v-else-if="picIdx == 37" src="../assets/image/10.png" alt="" />
          <!-- <img v-else src="../assets/image/11.png" alt=""> -->
        </div>

        <span>{{ temperature }}℃</span>
      </div>
      <div class="liveTime">{{ liveTime }}</div>
      <el-popover placement="bottom" trigger="click">
        <div style="display: flex; justify-content: space-around; align-items: center">
          <span style="color: #d1eaff">报警推送</span>
          <el-switch v-model="warnVal" inactive-color="#eaecf0" active-color="#55e3ba" @change="SwitchChg"> </el-switch>
        </div>
        <template #reference>
          <div class="setUp">
            <img src="../assets/image/setUp.png" alt="" />
            <span>设置</span>
          </div>
        </template>
      </el-popover>
      <div class="setting" @click="signOut">
        <img src="../assets/image/exit.png" alt="" />
        <span>退出</span>
      </div>
    </div>
  </div>
  <WarnDialog ref="warnWsRef" :switch="warnVal" />
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import dayjs from 'dayjs'
import WarnDialog from './warnDialog.vue'
import { useRoute, useRouter } from 'vue-router'
import { useHomeStore } from '../store/index'
import { storeToRefs } from 'pinia'
import axios from 'axios'
const warnStore = useHomeStore()
// 解构
let { warnSwitch } = storeToRefs(warnStore)
const router = useRouter()
const route = useRoute()
const temperature = ref()
const picIdx = ref()
const activeRout = ref(0)
const warnWsRef = ref()
const AsideList = [
  { id: 0, name: '首页', path: '/about' },
  { id: 1, name: '拟态', path: '/mimicry' },
  { id: 3, name: '报警', path: '/warn' },
  { id: 2, name: '设备', path: '/device' },
]
const liveTime = ref(dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'))
const temp = ref('')
let times = null
const weekList = [
  { id: 0, val: '周日' },
  { id: 1, val: '星期一' },
  { id: 2, val: '星期二' },
  { id: 3, val: '星期三' },
  { id: 4, val: '星期四' },
  { id: 5, val: '星期五' },
  { id: 6, val: '星期六' },
]
const weekStr = ref('')
const autolocation = ref('')
watch(
  () => route,
  e => {
    // 进入页面设置标题样式
    AsideList.forEach(e => {
      if (route.path == e.path || route.path.includes(e.path)) {
        activeRout.value = e.id
      }
    })
  },

  {
    immediate: true, // 立即处理 进入页面就触发
    deep: true, // 深度监听的参数
  },
)
let timer = ''
function showPosition(position) {
  autolocation.value = position.city
  if (position.city) {
    // 发送天气请求
    getWeather(autolocation.value)
    timer = setInterval(() => {
      getWeather(autolocation.value)
    }, 1000 * 60 * 60)
  }
  // console.log(position);
}
function showErr(e) {}
function getWeek() {
  weekList.filter(e => {
    if (e.id == dayjs().day()) {
      weekStr.value = e.val
    }
  })
}
function currentTime() {
  times = setInterval(() => {
    liveTime.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
  }, 1000)
}

function SwitchChg(e) {
  warnStore.$patch(state => {
    state.warnSwitch = e
    if (e) {
      warnWsRef.value.initWs()
    } else {
      warnWsRef.value.closeWebSocket()
    }
  })
}
// 路由跳转样式
function rtClick(i) {
  activeRout.value = i
}
// 退出
function signOut() {
  const { origin } = window.location
  window.location.href = origin
  localStorage.clear()
}
function go() {
  router.push({ path: '/about' })
}
const warnVal = ref()

onMounted(() => {
  warnVal.value = warnSwitch.value
  // 根据开关打开ws
  if (warnVal.value) {
    warnWsRef.value.initWs()
  } else {
    warnWsRef.value.closeWebSocket()
  }
  console.log(warnVal.value, 'warnVal')
  getWeek()
  currentTime()
  let geolocation = new window.qq.maps.Geolocation('QHQBZ-74AK5-PXIIR-IQBOP-7APDJ-XRBXP', 'myapp')
  // console.log(JSON.stringify(geolocation))
  if (geolocation) {
    let options = { timeout: 9000, failTipFlag: true }
    geolocation.getLocation(showPosition, showErr, options)
  }
})
onBeforeUnmount(() => {
  clearInterval(times)
  times = null
  clearImmediate(timer)
  warnWsRef.value.closeWebSocket()
})
function getWeather(city) {
  axios
    .get(`https://api.seniverse.com/v3/weather/now.json?key=Sdg7JSFCt_G3E6Dyw&location=${city}&language=zh-Hans&unit=c`)
    .then(function (response) {
      // handle success
      temperature.value = JSON.parse(response.request.response).results[0].now.temperature
      picIdx.value = parseInt(JSON.parse(response.request.response).results[0].now.code)
      console.log(JSON.parse(response.request.response).results[0].now.code)
      console.log(JSON.parse(response.request.response).results[0].now.temperature)
    })
    .catch(function (error) {
      // handle error
      console.log(error)
    })
    .finally(function () {
      // always executed
    })
}
</script>

<style scoped lang="scss">
#header {
  width: 100%;
  height: 80px;
  position: sticky;
  top: 0;
  z-index: 999;
  box-sizing: border-box;
  // background: #061426;
  .headBj {
    width: 100%;
    height: 80px;

    // background: url("../assets/image/headMain.png") no-repeat;
    // background-size: 100% 100%;
    img {
      width: 100%;
      height: 80px;

      display: inline-block;
    }
  }

  .title {
    position: absolute;
    top: 20px;
    left: 36px;
    font-size: 42px;
    text-shadow: 0px 6px 3px rgba(6, 0, 1, 0.66);
    font-weight: 600;
    letter-spacing: 12px;
    cursor: pointer;
    &::before {
      content: '\667a\6167\6c14\4f53\5b89\5168\76d1\63a7\4e2d\5fc3';
      position: absolute;
      z-index: 10;
      color: #fefefe;
      // 渐变样式
      background: linear-gradient(180deg, rgba(94, 183, 255, 1) 0%, rgba(229, 243, 255, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      // 去除继承父级样式
      text-shadow: none;
    }
  }

  .mainBox {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 30%;
    img {
      width: 695px;
      height: 40px;
    }
    .ctn {
      width: 20%;
      display: flex;
      justify-content: space-between;
      margin-right: 145px;
    }

    .routerBox {
      width: 175px;
      height: 40px;
      background: url('../assets/image/headTitleBj2.png') no-repeat;
      background-size: 100% 100%;
      background-position: fixed;
      color: #d1eaff;

      font-size: 18px;
      font-weight: 400;
      letter-spacing: 3px;
      line-height: 40px;
      cursor: pointer;

      position: absolute;
      text-shadow: 0px 6px 3px rgba(6, 0, 1, 0.66);
    }
    .color1 {
      position: absolute;
      font-size: 20px;
      font-weight: 700;
      // // 渐变样式
      // background: linear-gradient(
      //   180deg,
      //   rgba(94, 183, 255, 1) 0%,
      //   rgba(229, 243, 255, 1) 100%
      // );
      -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;
      // // 去除继承父级样式
      // text-shadow: none;
      background: url('../assets/image/headTitleBj1.png') no-repeat;
      background-size: 100% 100%;
    }
    .color2 {
      color: #4695b8;
    }
  }
  .TimeBox {
    display: flex;
    align-items: center;
    opacity: 1;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 32px;
    color: rgba(209, 234, 255, 1);
    text-align: right;
    justify-content: flex-end;
    position: absolute;
    top: 35px;
    right: 0;
    .location {
      margin-right: 30px;
    }
    .liveTime {
      margin: 0 36px 0 36px;
    }
    .setUp {
      display: flex;
      align-items: center;
      cursor: pointer;

      img {
        width: 23px;
        height: 23px;
        margin-right: 5px;
      }
    }
    .setting {
      margin: 0 30px;
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        width: 18px;
        height: 18px;
        margin-right: 5px;
      }
    }
    // position: absolute;
    // top: 20px;
    // right: 15px;
    // font-size: 18px;
    // display: flex;
    // align-items: center;
    // color: #d1eaff;
    // z-index: 888;
    // .el-icon-setting {
    //   color: #d1eaff;
    //   cursor: pointer;
    //   margin-left: 20px;
    //   font-size: 18px;
    // }
  }
}
.temp img {
  width: 87%;
  position: relative;
  top: 3px;
  margin-right: 5px;
}
.img-box {
  display: inline-block;
  width: 30px;
  height: 30px;
}
</style>
